/* ==========================================================================
   THE MAIN NAV
   ========================================================================== */

.nav-main {
    @apply hidden select-none bg-white shadow absolute rtl:right-0 ltr:left-0 overflow-scroll w-56;
    @apply dark:bg-dark-800 dark:shadow-dark;

    transition: all .3s;
    height: calc(100dvh - 52px);
    .showing-license-banner & {
        height: calc(100dvh - 105px);
    }

    h6 { @apply mt-6; }

    ul {
        @apply list-none p-0 mt-0;
    }

    .nav-main-inner > ul:last-child {
        @apply pb-8;
    }

    li {
        @apply p-0 text-sm;
        margin-top: 6px;
    }

    li a {
        @apply p-0 flex items-center text-gray-800 dark:text-dark-150;
        transition: all .08s ease-in-out;

        &:hover {
            @apply text-blue dark:text-blue-300;
            i {
                @apply dark:text-blue-300;
            }
        }

        i {
            @apply block h-7 p-1 w-7 rtl:ml-2 ltr:mr-2 rounded-full;
            @apply dark:text-dark-150/70;
        }
    }

    li.current > a {
        @apply text-gray-900 font-medium dark:text-white;

        i {
            @apply bg-white dark:bg-dark-600 dark:text-dark-100;
        }
    }

    li ul {
        @apply mb-2;
        margin-left: 1.5rem ; [dir="rtl"] & { margin-right: 1.5rem ; margin-left: 0 ; }

        li {
            @apply text-xs;
            margin-left: 12px ; [dir="rtl"] & { margin-right: 12px ; margin-left: 0 ; }
        }

        li a {
            @apply text-gray;
        }
    }

    .nav-closed & {
        left: -110% ; [dir="rtl"] & { left: auto ; right: -110% ; }
    }

    .nav-section-top-level {
        @apply mt-4;
    }
}

@screen md {
    .nav-main {
        @apply fixed flex bg-transparent shadow-none overflow-auto rtl:border-l ltr:border-r dark:border-dark-900;

        .nav-closed & {
            @apply border-0 shadow-none;
        }
    }
}

.nav-main-inner {
    @apply rtl:pr-6 ltr:pl-6 rtl:pl-4 ltr:pr-4 pt-2;
}

.nav-toggle {
    @apply flex items-center justify-center h-6 p-1 w-6 rtl:ml-3 ltr:mr-3 rounded;
    outline: none !important;

    &:hover {
        @apply bg-gray-200 dark:bg-dark-500;
    }
}



/* Responsive Wangjangling
  ========================================================================== */
